<template>
  <!-- 商品列表 -->
  <div ref="target" class="sort-list-container">
    <ul>
      <li v-for="item in goodList" :key="item.id">
        <GoodsItem :good="item" />
      </li>
    </ul>
  </div>
  <!-- 上拉加载更多组件 -->
  <XtxInfiniteLoad
    :isLoading="isLoading"
    :isFinished="isFinished"
    @load="getNextPage"
  />
</template>

<script>
//  导入商品模块
import GoodsItem from './goods-item.vue'
// 导入获取筛选商品数据
import { findSubCategoryGoods } from '../../../api/category.js'
import { ref, inject, watch } from 'vue'
import { useRoute } from 'vue-router'

// 抽离列表渲染
function useList (filterParams) {
  const goodList = ref([])
  const route = useRoute()
  // 请求参数
  const params = {
    page: 0,
    pageSize: 20,
    categoryId: route.params.id,
    sortField: null, // 排序类别
    attrs: [], // 商品属性
    brandId: null // 品牌名称
  }

  // 实现上拉加载更多
  const isLoading = ref(false) // 是否在加载中
  const isFinished = ref(false) // 数据全部加载完毕

  // 下拉加载更多回调函数 => 字串父过来的
  const getNextPage = async () => {
    // 开启列表加载
    isLoading.value = true
    // 发请求获取数据 页码加1
    params.page++
    const { data } = await findSubCategoryGoods({ ...params, ...filterParams.value })
    // console.log(data.result.counts)
    // 获取数据后最追加列表
    goodList.value.push(...data.result.items)
    // 关闭列表加载
    isLoading.value = false
    // 判读列表数据是否加载完毕 列表长度和 数据库里数据的长度作对比
    if (goodList.value.length === data.result.counts) {
      isFinite.value = true
    }
  }
  return {
    goodList,
    params,
    isLoading,
    isFinished,
    getNextPage
  }
}
export default {
  name: 'SubList',
  components: {
    GoodsItem
  },
  setup () {
    // 接受sub过滤传来值 目的 : 发送请求
    const filterParams = inject('filterParams')
    // 抽离的钩子
    const {
      goodList,
      params,
      isLoading,
      isFinished,
      getNextPage
    } = useList(filterParams)

    // 监听 filterParams 变化 => 如果变化刷新列表
    watch(() => filterParams.value, () => {
      // console.log(filterParams.value, '变化了')
      // 重置列表  删除列表数据
      goodList.value = []
      // 重置数据加载状态
      params.page = 0
      isLoading.value = false
      isFinite.value = false
    }, { deep: true })

    return {
      goodList,
      isLoading,
      isFinished,
      getNextPage
    }
  }
}
</script>

<style lang="less" scoped>
.sort-list-container {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
